import { _decorator, EventHandler, Sprite, Node, EventTouch, SpriteFrame, UITransform } from 'cc';
import { ButtonRedefine } from './ButtonRedefine';
import { ToggleContainerRedefine } from './ToggleContainerRedefine';
const { ccclass, property, menu, executionOrder, requireComponent } = _decorator;

@ccclass('ToggleRedefine')
@menu('myComponent/ToggleRedefine')
@executionOrder(110)
@requireComponent(UITransform)
export class ToggleRedefine extends ButtonRedefine {
  @property({
    displayOrder: 1,
    tooltip: '如果这个设置为true,则markSprite会显示canelSprite，否则显示selectedSprite。',
  })
  get isChecked(): boolean {
    return this._isChecked;
  }

  set isChecked(value) {
    this._set(value);
  }

  @property({
    type: Sprite,
    displayOrder: 1,
    tooltip: 'Toggle背景图片',
  })
  protected markSprite: Sprite = null!;

  @property({
    type: SpriteFrame,
    displayOrder: 1,
    tooltip: 'Toggle处于取消状态时显示的精灵图片',
  })
  protected canelSprite: SpriteFrame = null;

  @property({
    type: SpriteFrame,
    displayOrder: 1,
    tooltip: 'Toggle处于选中状态时显示的精灵图片',
  })
  protected selectedSprite: SpriteFrame = null!;
  get _toggleContainer(): ToggleContainerRedefine | null {
    const parent = this.node.parent!;
    if (Node.isNode(parent)) {
      return parent.getComponent('ToggleContainerRedefine') as ToggleContainerRedefine;
    }
    return null;
  }

  @property({
    type: EventHandler,
    tooltip: '切换按钮状态之前检测是否可以选择\n方法接受参数(event:EventTouch, isChecked:boolean, customEventData:any):boolean\nisChecked:将要设置的状态\ncustomEventData:自定义数据\n返回值:是否允许设置状态',
    displayOrder: 20,
    serializable: true,
  })
  protected checkEvent: EventHandler = new EventHandler();

  @property({
    type: EventHandler,
    tooltip: '设置状态失败回调，(isChecked:boolean, customEventData:any)\nisChecked:设置这个状态失败了\ncustomEventData:自定义数据',
    displayOrder: 20,
    serializable: true,
  })
  protected checkFailEvent: EventHandler = new EventHandler();

  @property({
    serializable: true,
  })
  protected _isChecked = true;

  protected _set(value: boolean): void {
    if (this._isChecked == value) return;

    this._isChecked = value;

    const group = this._toggleContainer;
    if (group && group.enabled && this.enabled) {
      if (value || (!group.anyTogglesChecked() && !group.allowSwitchOff)) {
        this._isChecked = true;
        group.notifyToggleCheck(this);
      }
    }
    if (this._isChecked) {
      this.markSprite.spriteFrame = this.selectedSprite;
    } else {
      this.markSprite.spriteFrame = this.canelSprite;
    }
    this.markSprite.node.active = this.markSprite.spriteFrame != null;
  }

  onClickActive(event?: EventTouch): void {
    //先检测是否可以选择
    let boo = true;
    if (this.checkEvent && this.checkEvent.target) {
      const sp = this.checkEvent.target.getComponent(this.checkEvent._componentName);
      boo = !!sp[this.checkEvent.handler].call(sp, event, !this._isChecked, this.checkEvent.customEventData);
    }
    if (!boo) {
      if (this.checkFailEvent && this.checkFailEvent.target) {
        const sp = this.checkFailEvent.target.getComponent(this.checkFailEvent._componentName);
        sp[this.checkFailEvent.handler].call(sp, !this._isChecked, this.checkFailEvent.customEventData);
      }
      return;
    }
    this._set(!this._isChecked);
    super.onClickActive(event);
  }
}
